<template>



  <el-page-header @back="$router.go(-1)">
     
      <template #content>
        <div class="flex items-center">
         
          <span class="text-large font-600 mr-3"> 

</span>
         
        </div>
      </template>
      <template #extra>
        <div class="flex items-center">
     
          <el-button  :icon="Plus" type="primary" class="ml-2" @click="add">添加章节</el-button>
        </div>
      </template>


  </el-page-header>

  <el-card>

    <el-tree
    
    :data="course.chapterList"
    :props="defaultProps"
    @node-click="handleNodeClick"
  >

  <template #default="{ node, data }">
        <span class="custom-tree-node">
          <span>{{ node.label }}</span>

          <span v-if="node.level===1">
              <el-button @click =update(data)>编辑章节</el-button>
              <el-button type="primary" @click ="addTime(data)">添加课时</el-button>
          </span>

          <span v-else-if="node.level===2" class="mybtnsmall">
              <el-button type="info"  size="small"  @click ="updateTime(data)">编辑课时</el-button>
              <el-button type="success"  size="small" @click="addVideo(data)">上传视频</el-button>
          </span>

        </span>
      </template>

 </el-tree>
  </el-card>





  <el-dialog title="添加章节" v-model="dialogFormVisible" @close="clear()" width="1800px">

<el-form :model="form" ref="formRef" :rules="rules" label-width="100px">
    <el-form-item label="章节名" prop="name">
        <el-input v-model="form.name" placeholder="请输入课程名"></el-input>
    </el-form-item>

</el-form>

<div slot="footer" class="dialog-footer">
    <el-button @click=clear>取 消</el-button>
    <el-button type="primary" @click="save">确 定</el-button>
</div>
</el-dialog>


<el-dialog title="编辑章节" v-model="dialogFormVisibleUpdate" @close="clear()" width="1800px">

<el-form :model="form" ref="formRef" :rules="rules" label-width="100px">
    <el-form-item label="章节名" prop="name">
        <el-input v-model="form.name" placeholder="请输入课程名"></el-input>
    </el-form-item>

</el-form>

<div slot="footer" class="dialog-footer">
    <el-button @click=clear>取 消</el-button>
    <el-button type="primary" @click="save">确 定</el-button>
</div>
</el-dialog>



<el-dialog title="添加课时" v-model="dialogTimeVisible" @close="clear()" width="1800px">

<el-form :model="form" ref="formRef" :rules="rules" label-width="100px">
    <el-form-item label="课时名" prop="name">
        <el-input v-model="form.name" placeholder="请输入课时名"></el-input>
    </el-form-item>

</el-form>

<div slot="footer" class="dialog-footer">
    <el-button @click=clear>取 消</el-button>
    <el-button type="primary" @click="saveTime">确 定</el-button>
</div>
</el-dialog>


<el-dialog title="编辑课时" v-model="dialogTimeUpdateVisible" @close="clear()" width="1800px">

<el-form :model="form" ref="formRef" :rules="rules" label-width="100px">
    <el-form-item label="课时名" prop="name">
        <el-input v-model="form.name" placeholder="请输入课时名"></el-input>
    </el-form-item>

</el-form>

<div slot="footer" class="dialog-footer">
    <el-button @click=clear>取 消</el-button>
    <el-button type="primary" @click="saveTime">确 定</el-button>
</div>
</el-dialog>



<el-dialog title="上传视频" v-model="dialogVideoVisible" @close="clear()" width="1800px">

    <myfile :msg="xxx"></myfile>

<div slot="footer" class="dialog-footer">
    <el-button @click=clear>取 消</el-button>
    <el-button type="primary" @click="clear">确 定</el-button>
</div>
</el-dialog>






</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import{Plus} from '@element-plus/icons-vue'
import { ref,onMounted } from "vue";
import axios from "axios";
import myfile from "./myfile.vue";


const route = useRoute();


interface Tree {
  label: string
  children?: Tree[]
}

const handleNodeClick = (data: Tree) => {
  console.log(data)
}

const course =ref({})

const getcourseList = async ()=>{
const res = await  axios.get("/courseContent/getCourseContent?courseId="+route.query.id)
course.value = res.data.data[0]
}

onMounted(()=>{
  getcourseList()
})


const data: Tree[] = [
  {
    label: 'Level one 1',
    children: [
      {
        label: 'Level two 1-1',
        children: [
          {
            label: 'Level three 1-1-1',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 2',
    children: [
      {
        label: 'Level two 2-1',
        children: [
          {
            label: 'Level three 2-1-1',
          },
        ],
      },
      {
        label: 'Level two 2-2',
        children: [
          {
            label: 'Level three 2-2-1',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 3',
    children: [
      {
        label: 'Level two 3-1',
        children: [
          {
            label: 'Level three 3-1-1',
          },
        ],
      },
      {
        label: 'Level two 3-2',
        children: [
          {
            label: 'Level three 3-2-1',
          },
        ],
      },
    ],
  },
]

const defaultProps = {
  children: 'filePOList',
  label: (data)=>data.name  



}


const dialogFormVisible = ref(false)
const dialogFormVisibleUpdate = ref(false)

const clear = ()=>{
  dialogFormVisible.value = false
  dialogFormVisibleUpdate.value = false
  getcourseList()
  form.value = {}

  dialogTimeVisible.value =false
  dialogTimeUpdateVisible.value =false

  dialogVideoVisible.value = false

  dialogVideoVisible.value = false
}

const form = ref({})



const add = () => {
        form.value = {}
        dialogFormVisible.value = true
    }



    const update = (item) => {
        form.value = item
        dialogFormVisibleUpdate.value = true
    }


const save = async ()=>{
  await formRef.value.validate()
    form.value.courseId = route.query.id
        const res = await axios.post('/courseContent/addChapter', form.value)
        ElNotification({
            title: '课程管理',
            message: '保存成功',
            duration: 2000,
            type:'success'
        })
        clear()
}

const formRef = ref()

const rules = ref({
        name: [
            {required: true, message: '请输入章节名', trigger: 'blur'},
            {
                pattern: /^\S{2,10}/,
                message: '章节名长度在2-10个非空字符',
                trigger: 'blur'
            }
        ],

    })


const dialogTimeVisible=ref(false)
const dialogTimeUpdateVisible=ref(false)

const addTime = (item)=>{
  form.value.cid = item.cid
  dialogTimeVisible.value = true
}



const updateTime = (item) => {
        form.value = item
        dialogTimeUpdateVisible.value = true
    }


const saveTime = async ()=>{
  await formRef.value.validate()
 
        const res = await axios.post('/courseContent/addTime', form.value)
        ElNotification({
            title: '课程管理',
            message: '保存成功',
            duration: 2000,
            type:'success'
        })
        clear()
}



const  dialogVideoVisible =ref(false)

const xxx =ref({})
const addVideo = (item)=>{
  dialogVideoVisible.value = true
   xxx.value = item
}



</script>

<style lang="scss" scoped>

.el-page-header__header{
  margin-top: 20px;
}

.el-page-header {
  margin-bottom: 17px;
}


:deep(.el-tree-node){
  padding: 15px 0px;
  border-bottom: 1px soli rgba(0,0,0,0.05);
  font-size: 18px;
}

.mybtnsmall{
  margin-right: 20px;
}

</style>

<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}




</style>